<template>
  <div class="product-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span>商品管理</span>
        <el-button style="float: right" type="primary" @click="handleAdd" icon="el-icon-plus">
          新增商品
        </el-button>
      </div>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="商品名称">
            <el-input v-model="searchForm.name" placeholder="请输入商品名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select v-model="searchForm.category_id" placeholder="请选择分类" clearable>
              <el-option v-for="category in categoryOptions" :key="category.id" :label="category.name"
                :value="category.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
              <el-option label="上架" :value="1"></el-option>
              <el-option label="下架" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 商品列表 -->
      <el-table :data="productList" v-loading="loading" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column label="商品图片" width="120">
          <template slot-scope="scope">
            <el-image :src="scope.row.main_image" :preview-src-list="[scope.row.main_image]"
              style="width: 80px; height: 80px" fit="cover">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" min-width="200">
          <template slot-scope="scope">
            <div class="product-info">
              <div class="product-name">{{ scope.row.name }}</div>
              <!-- <div class="product-detail" v-html="scope.row.detail"></div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="limit_quantity" label="限购" width="120">
          <template slot-scope="scope">
            {{  scope.row.limit_quantity ? `限购${scope.row.limit_quantity}件` : '不限购'  }}
            <!-- <el-input-number disabled v-model="scope.row.stock" :min="0" size="mini"></el-input-number> -->
          </template>
        </el-table-column>
        <el-table-column prop="category_id" label="分类" width="100">
          <template slot-scope="scope">
            {{ getCategoryName(scope.row.category_id) }}
          </template>
        </el-table-column>
        <el-table-column label="价格信息" width="200">
          <template slot-scope="scope">
            <div class="price-info" v-if="scope.row.sku">
              <div class="current-price">¥{{ scope.row.sku.price }}</div>
              <div class="vip-price">秒杀价: ¥{{ scope.row.sku.vip_price }}</div>
              <div class="market-price">市场价: ¥{{ scope.row.sku.market_price }}</div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_goods" label="是否秒杀" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_goods === 1 ? 'warning' : 'info'">
              {{ scope.row.is_goods === 1 ? '秒杀' : '普通' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="handleSKU(scope.row)">SKU管理</el-button>
            <el-button size="mini" type="danger" @click="handleGuige(scope.row.id)">规格管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.current" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 添加/编辑商品对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
      <el-form :model="productForm" :rules="productRules" ref="productForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="productForm.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="category_id">
              <el-select v-model="productForm.category_id" placeholder="请选择分类">
                <el-option v-for="category in categoryOptions" :key="category.id" :label="category.name"
                  :value="category.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>




        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品状态" prop="status">
              <el-switch v-model="productForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                :inactive-value="0" active-text="上架" inactive-text="下架">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否秒杀" prop="is_goods">
              <el-switch v-model="productForm.is_goods" active-color="#13ce66" inactive-color="#ff4949"
                :active-value="1" :inactive-value="0" active-text="秒杀" inactive-text="普通">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="限购数量" prop="limit_quantity">
              <el-input-number 
                v-model="productForm.limit_quantity" 
                :min="0" 
                :max="9999" 
                placeholder="0表示不限购"
                style="width: 100%">
              </el-input-number>
              <div class="form-tip">设置为0表示不限购，大于0表示限购数量</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="主图" prop="main_image">
          <ImgCutter v-on:cutDown="handleMainImageCutDown" :cutWidth="500" :cutHeight="500" :boxHeight="500">
            <template #open>
              <el-button type="primary" size="small">选择主图</el-button>
            </template>
          </ImgCutter>
          <el-image 
            v-if="productForm.main_image"
            style="width: 300px; height: 300px; margin-top: 10px; border: 1px solid #dcdfe6; border-radius: 4px;"
            :src="productForm.main_image"
            fit="cover">
          </el-image>
        </el-form-item>

        <el-form-item label="轮播图" prop="carousel_images">
          <div class="carousel-images-container">
            <div v-for="(image, index) in productForm.carousel_images" :key="index" class="carousel-image-item">
              <el-image :src="image" class="carousel-avatar" fit="cover"></el-image>
              <el-button type="danger" size="mini" @click="removeCarouselImage(index)" icon="el-icon-delete"
                class="remove-btn"></el-button>
            </div>
            <ImgCutter v-if="productForm.carousel_images.length < 5" v-on:cutDown="handleCarouselImageCutDown" :cutWidth="500" :cutHeight="500" :boxHeight="500">
              <template #open>
                <div class="carousel-upload-btn">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </template>
            </ImgCutter>
          </div>
          <div class="carousel-tip">最多上传5张轮播图</div>
        </el-form-item>

        <el-form-item label="商品详情" prop="detail">
          <div class="wang-editor-container">
            <WangEditor :content="productForm.detail" @submit="workVadeUpdate" />
          </div>
          <!-- <div style="margin-top: 10px;">
            <el-button size="small" @click="testEditor">测试编辑器</el-button>
            <span style="margin-left: 10px; color: #666;">当前内容长度: {{ productForm.detail ? productForm.detail.length : 0 }}</span>
          </div> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- SKU管理对话框 -->
    <el-dialog title="SKU管理" :visible.sync="skuDialogVisible" width="1000px" :close-on-click-modal="false">
      <div class="sku-header">
        <el-button type="primary" @click="addSKU" icon="el-icon-plus">添加SKU</el-button>
        <!-- <el-button type="success" @click="batchUpdateSKU" icon="el-icon-edit">批量更新</el-button> -->
      </div>

      <el-table :data="skuList" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="SKU ID" width="100"></el-table-column>
        <el-table-column label="规格图片" width="120">
          <template slot-scope="scope">
            <el-image :src="scope.row.image" :preview-src-list="[scope.row.image]" style="width: 60px; height: 60px"
              fit="cover">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="specs" label="规格属性" min-width="200">
          <template slot-scope="scope">
            <div v-for="(value) in scope.row.skus" :key="value.id" class="spec-item">
              <span class="spec-label">{{ value.spec_name }}:</span>
              <span class="spec-value">{{ value.spec_value }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
          <template slot-scope="scope">
            <el-input-number disabled v-model="scope.row.price" :precision="2" :step="1" :min="0"
              size="mini"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="销量" width="120">
          <template slot-scope="scope">
            <el-input-number disabled v-model="scope.row.sales" :min="0" size="mini"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="120">
          <template slot-scope="scope">
            <el-input-number disabled v-model="scope.row.stock" :min="0" size="mini"></el-input-number>
          </template>
        </el-table-column>
       
        <el-table-column prop="sku_code" label="" width="150">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.sku_sn" size="mini"></el-input>
          </template>
        </el-table-column>
        
        <el-table-column prop="sku_code" label="SKU编码" width="150">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.sku_sn" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editSKU(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteSKU(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加/编辑SKU对话框 -->
      <el-dialog title="SKU信息" :visible.sync="skuFormVisible" width="600px" append-to-body>
        <el-form :model="skuForm" :rules="skuRules" ref="skuForm" label-width="100px">
          <el-form-item label="规格属性" prop="skus">

            <div v-for="(spec, index) in skuForm.skus" :key="index" class="spec-row">
              <el-select v-model="spec.spec_name" placeholder="选择规格" style="width: 150px; margin-right: 10px;" @change="onSpecNameChange(index)">
                <el-option v-for="guige in guigeList" :key="guige.id" :label="guige.name" :value="guige.name"></el-option>
              </el-select>
              <el-select v-model="spec.spec_value_id" placeholder="选择规格值" style="width: 150px; margin-right: 10px;" :disabled="!spec.spec_name" @change="onSpecValueChange(index)">
                <el-option v-for="value in getSpecValues(spec.spec_name)" :key="value.id" :label="value.value" :value="value.id"></el-option>
              </el-select>
              <el-button type="danger" size="mini" @click="removeSpec(index)" icon="el-icon-delete"></el-button>
            </div>
            <el-button type="primary" size="mini" @click="addSpec" icon="el-icon-plus">添加规格</el-button>
          </el-form-item>

          <el-form-item label="价格" prop="price">
            <el-input-number v-model="skuForm.price" :precision="2" :step="1" :min="0"
              style="width: 100%"></el-input-number>
          </el-form-item>

          <el-form-item label="库存" prop="stock">
            <el-input-number v-model="skuForm.stock" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>

          <el-form-item label="销量" prop="stock">
            <el-input-number v-model="skuForm.sales" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>

          <el-form-item label="市场价" prop="stock">
            <el-input-number v-model="skuForm.market_price" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>

          <el-form-item label="秒杀价" prop="stock">
            <el-input-number v-model="skuForm.vip_price" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>



          <el-form-item label="SKU编码" prop="sku_code">
            <el-input v-model="skuForm.sku_sn" placeholder="请输入SKU编码"></el-input>
          </el-form-item>

          <el-form-item label="规格图片">
            <ImgCutter :boxHeight="500"  v-on:cutDown="handleSKUImageCutDown" :cutWidth="500" :cutHeight="500">
              <template #open>
                <el-button type="primary" size="small">选择规格图片</el-button>
              </template>
            </ImgCutter>
            <el-image 
              v-if="skuForm.image"
              style="width: 200px; height: 200px; margin-top: 10px; border: 1px solid #dcdfe6; border-radius: 4px;"
              :src="skuForm.image"
              fit="cover">
            </el-image>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="onSkuClose">取消</el-button>
          <el-button type="primary" @click="submitSKU">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>

    <!-- 规格管理对话框 -->
    <el-dialog title="规格管理" :visible.sync="guigeDialogVisible" width="1000px" :close-on-click-modal="false">
      <div class="guige-header">
        <el-button type="primary" @click="addGuige" icon="el-icon-plus">添加规格</el-button>
      </div>

      <el-table :data="guigeList" border style="width: 100%">
        <el-table-column prop="id" label="规格ID" width="100"></el-table-column>
        <el-table-column prop="name" label="规格名称" width="150"></el-table-column>
        <el-table-column label="规格值" min-width="300">
          <template slot-scope="scope">
            <div class="guige-values">
              <el-tag v-for="value in scope.row.value" :key="value.id" size="small" style="margin: 2px;" closable
                @close="deleteGuigeValue(scope.row.id, value.id)">
                {{ value.value }}
                <el-image v-if="value.image" :src="value.image" style="width: 20px; height: 20px; margin-left: 5px;"
                  fit="cover"></el-image>
              </el-tag>
              <el-button size="mini" type="text" @click="addGuigeValue(scope.row)" icon="el-icon-plus">添加值</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editGuige(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteGuige(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加/编辑规格对话框 -->
      <el-dialog title="规格信息" :visible.sync="guigeFormVisible" width="600px" append-to-body>
        <el-form :model="guigeForm" :rules="guigeRules" ref="guigeForm" label-width="100px">
          <el-form-item label="规格名称" prop="name">
            <el-input v-model="guigeForm.name" placeholder="请输入规格名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="guigeFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitGuige">确定</el-button>
        </div>
      </el-dialog>

      <!-- 添加/编辑规格值对话框 -->
      <el-dialog title="规格值信息" :visible.sync="guigeValueFormVisible" width="500px" append-to-body>
        <el-form :model="guigeValueForm" :rules="guigeValueRules" ref="guigeValueForm" label-width="100px">
          <el-form-item label="规格值" prop="value">
            <el-input v-model="guigeValueForm.value" placeholder="请输入规格值"></el-input>
          </el-form-item>
          <el-form-item label="规格图片">
            <ImgCutter  :boxHeight="500" v-on:cutDown="handleGuigeValueImageCutDown" :cutWidth="500" :cutHeight="500">
              <template #open>
                <el-button type="primary" size="small">选择规格值图片</el-button>
              </template>
            </ImgCutter>
            <el-image 
              v-if="guigeValueForm.image"
              style="width: 200px; height: 200px; margin-top: 10px; border: 1px solid #dcdfe6; border-radius: 4px;"
              :src="guigeValueForm.image"
              fit="cover">
            </el-image>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="guigeValueFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitGuigeValue">确定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import WangEditor from '@/components/richText'
import ImgCutter from 'vue-img-cutter'
import axios from "axios"
import { getShoopStoreList, getShoopSkuList, setShoopSku, getStoreGuigeList, setStoreGuigeSave, setShangpingInfo, categoryList,delShoopSku,delStoreGuigeSave } from '../../../libs/api'

export default {
  name: 'ProductManagement',
  components: {
    WangEditor,
    ImgCutter
  },
  data() {
    return {
      loading: false,
      searchForm: {
        name: '',
        category_id: '',
        status: ''
      },
      productList: [],
      categoryOptions: [],
      pagination: {
        current: 1,
        size: 20,
        total: 0
      },
      dialogVisible: false,
      dialogType: 'add',
      dialogTitle: '新增商品',
      productForm: {
        id: '',
        category_id: '',
        name: '',
        main_image: '',
        carousel_images: [], // 轮播图数组
        detail: '',
        status: 1,
        is_goods: 0,
        price: 0,
        vip_price: 0,
        market_price: 0,
        sales: 0,
        limit_quantity: 0 // 限购数量，0表示不限购
      },
      productId: '',
      productRules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        main_image: [
          { required: true, message: '请上传商品主图', trigger: 'change' }
        ]
      },
      skuDialogVisible: false,
      skuFormVisible: false,
      skuList: [],
      skuForm: {
        id: '',
        product_id: '',
        skus: [],
        price: 0,
        stock: 0,
        sku_sn: '',
        image: '',
        sales: 0,
        market_price: 0,
        vip_price: 0
      },
      skuRules: {
        price: [
          { required: true, message: '请输入SKU价格', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入SKU库存', trigger: 'blur' }
        ],
        sku_sn: [
          { required: true, message: '请输入SKU编码', trigger: 'blur' }
        ]
      },
      uploadUrl: 'https://api.zctj16888.com/admin/v1/image/ossUpload',
      currentProduct: null,
      guigeDialogVisible: false,
      guigeList: [],
      guigeFormVisible: false,
      guigeForm: {
        id: '',
        name: ''
      },
      guigeRules: {
        name: [
          { required: true, message: '请输入规格名称', trigger: 'blur' }
        ]
      },
      guigeValueFormVisible: false,
      guigeValueForm: {
        id: '',
        guige_id: '',
        value: '',
        image: ''
      },
      guigeValueRules: {
        value: [
          { required: true, message: '请输入规格值', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadProductList()
    this.loadCategoryOptions()
  },
  methods: {
    onSkuClose() {
      this.skuFormVisible = false
      this.productId = ''
    },
    async handleGuige(id) {
      try {
        this.currentProduct = { id: id };
        const res = await getStoreGuigeList({
          product_id: id
        });
        console.log('规格列表响应:', res.data);

        if (res.data && Array.isArray(res.data)) {
          this.guigeList = res.data;
        } else {
          this.guigeList = [];
          console.warn('规格列表数据格式异常:', res.data);
        }

        this.guigeDialogVisible = true;
      } catch (error) {
        console.error('加载规格列表失败:', error);
        this.$message.error('加载规格列表失败');
        this.guigeList = [];
      }
      // 数据是以下这样的给我加个弹窗可以添加修改
      //       [
      //     {
      //         "id": 13,
      //         "product_id": 9,
      //         "name": "存储",
      //         "created_at": "2025-08-18 16:08:50",
      //         "updated_at": "2025-08-18 16:08:50",
      //         "value": [
      //             {
      //                 "id": 30,
      //                 "spec_id": 13,
      //                 "value": "256GB",
      //                 "image": null
      //             },
      //             {
      //                 "id": 31,
      //                 "spec_id": 13,
      //                 "value": "512GB",
      //                 "image": null
      //             },
      //             {
      //                 "id": 32,
      //                 "spec_id": 13,
      //                 "value": "1TB",
      //                 "image": null
      //             }
      //         ]
      //     },
      //     {
      //         "id": 12,
      //         "product_id": 9,
      //         "name": "颜色",
      //         "created_at": "2025-08-18 16:08:50",
      //         "updated_at": "2025-08-18 16:08:50",
      //         "value": [
      //             {
      //                 "id": 28,
      //                 "spec_id": 12,
      //                 "value": "深空黑",
      //                 "image": "https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone15pro-max-black-select?wid=5120&hei=2880&fmt=p-jpg"
      //             },
      //             {
      //                 "id": 29,
      //                 "spec_id": 12,
      //                 "value": "星光金",
      //                 "image": "https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone15pro-max-gold-select?wid=5120&hei=2880&fmt=p-jpg"
      //             }
      //         ]
      //     }
      // ]
    },
    workVadeUpdate(content) {
      console.log(content)
      this.productForm.detail = content
    },
    async loadProductList() {
      this.loading = true
      const res = await getShoopStoreList({
        ...this.searchForm,
        page: this.pagination.current,
        page_size: this.pagination.size
      })
      console.log(res.data)
      this.productList = res.data.data;
      this.pagination.total = res.data.total || this.productList.length
      this.loading = false
    },

    async loadCategoryOptions() {
      try {
        const res = await categoryList()
        if (res.code === 1 && res.data) {
          // 将树形分类数据展平为选项数组
          this.categoryOptions = this.flattenCategories(res.data)
        } else {
          this.$message.error('获取分类列表失败')
          this.categoryOptions = []
        }
      } catch (error) {
        console.error('获取分类列表失败:', error)
        this.$message.error('获取分类列表失败')
        this.categoryOptions = []
      }
    },

    // 将分类树展平为列表（参考 classList.vue 的实现）
    flattenCategories(categories) {
      const allCategories = []
      const flatten = (cats) => {
        cats.forEach((category) => {
          allCategories.push({
            id: category.id,
            name: category.name,
            level: category.level,
            parent_id: category.parent_id,
          })

          if (category.children && category.children.length > 0) {
            flatten(category.children)
          }
        })
      }
      flatten(categories)
      return allCategories
    },

    getCategoryName(categoryId) {
      const category = this.categoryOptions.find(item => item.id === categoryId)
      return category ? category.name : '未知分类'
    },

    handleSearch() {
      this.pagination.current = 1
      this.loadProductList()
    },

    resetSearch() {
      this.searchForm = {
        name: '',
        category_id: '',
        status: ''
      }
      this.handleSearch()
    },

    handleSizeChange(val) {
      this.pagination.size = val
      this.loadProductList()
    },

    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadProductList()
    },

    handleAdd() {
      this.dialogType = 'add'
      this.dialogTitle = '新增商品'
      this.productForm = {
        id: '',
        category_id: '',
        name: '',
        main_image: '',
        carousel_images: [], // 轮播图数组
        detail: '',
        status: 1,
        is_goods: 0,
        price: 0,
        vip_price: 0,
        market_price: 0,
        sales: 0,
        limit_quantity: 0 // 限购数量，0表示不限购
      }
      this.dialogVisible = true
    },

    handleEdit(row) {
      this.dialogType = 'edit'
      this.dialogTitle = '编辑商品'
      this.productForm = {
        ...row,
        carousel_images: row.images || [] // 确保轮播图数组存在
      }
      console.log(this.productForm)
      this.dialogVisible = true
    },

    handleDelete(id) {
      this.$confirm('确定要删除该商品吗？删除后将无法恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productList = this.productList.filter(item => item.id !== id)
        this.pagination.total = this.productList.length
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    handleSubmit() {
      this.$refs.productForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.dialogType === 'add') {
              // 新增商品
              const newProductData = {
                category_id: this.productForm.category_id.toString(),
                name: this.productForm.name,
                main_image: this.productForm.main_image,
                images: this.productForm.carousel_images, // 轮播图数组
                detail: this.productForm.detail,
                status: this.productForm.status.toString(),
                is_goods: this.productForm.is_goods.toString(),
                limit_quantity: this.productForm.limit_quantity || 0
              };

              const res = await setShangpingInfo(newProductData);
              console.log('商品添加响应:', res);

              // 添加到本地列表
              const newProduct = {
                ...this.productForm,
                id: res.data.id || Date.now(),
                created_at: new Date().toLocaleString(),
                updated_at: new Date().toLocaleString()
              };
              this.productList.unshift(newProduct);
              this.pagination.total = this.productList.length;
              this.$message.success('添加成功');
            } else {
              // 编辑商品
              const updateProductData = {
                id: this.productForm.id.toString(),
                category_id: this.productForm.category_id.toString(),
                name: this.productForm.name,
                main_image: this.productForm.main_image,
                images: this.productForm.carousel_images, // 轮播图数组
                detail: this.productForm.detail,
                status: this.productForm.status.toString(),
                is_goods: this.productForm.is_goods.toString(),
                limit_quantity: this.productForm.limit_quantity || 0
              };

              const res = await setShangpingInfo(updateProductData);
              console.log('商品更新响应:', res);

              // 更新本地数据
              const index = this.productList.findIndex(item => item.id === this.productForm.id);
              if (index !== -1) {
                this.productList[index] = {
                  ...this.productList[index],
                  ...this.productForm,
                  updated_at: new Date().toLocaleString()
                };
              }
              this.$message.success('更新成功');
            }

            this.dialogVisible = false;
            // 重新加载商品列表以获取最新数据
            await this.loadProductList();
          } catch (error) {
            console.error('保存商品失败:', error);
            this.$message.error('保存商品失败');
          }
        }
      });
    },

    async handleSKU(row) {
      this.currentProduct = row
      this.skuDialogVisible = true
      // 加载SKU列表和规格列表
      await Promise.all([
        this.loadSKUList(row.id),
        this.loadGuigeList(row.id)
      ])
    },

    async loadSKUList(productId) {
      this.productId = productId;
      try {
        const res = await getShoopSkuList({
          product_id: this.productId
        })
        console.log('SKU列表响应:', res)

        if (res.data && Array.isArray(res.data)) {
          this.skuList = res.data
        } else {
          this.skuList = []
          console.warn('SKU列表数据格式异常:', res.data)
        }
      } catch (error) {
        console.error('加载SKU列表失败:', error)
        this.$message.error('加载SKU列表失败')
        this.skuList = []
      }

      //   {
      //     id: 2,
      //     product_id: productId,
      //     specs: { '颜色': '深空黑', '存储': '512GB' },
      //     price: 9999,
      //     stock: 50,
      //     sku_code: 'IP15P-BK-512',
      //     image: 'https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-15-pro-finish-select-202309-6-1inch?wid=5120&hei=2880&fmt=p-jpg'
      //   }
      // ]
    },

    addSKU() {
      this.skuForm = {
        id: '',
        product_id: this.currentProduct.id,
        skus: [{ spec_name: '', spec_value_id: '' }],
        price: 0,
        stock: 0,
        sku_sn: '',
        image: '',
        sales: 0,
        market_price: 0,
        vip_price: 0
      }
      this.skuFormVisible = true
    },

    editSKU(row) {
      this.skuForm = { ...row }
      // 如果SKU有规格数据，转换为编辑格式
      if (row.skus && Array.isArray(row.skus)) {
        this.skuForm.skus = row.skus.map(spec => ({
          spec_name: spec.spec_name || '',
          spec_value_id: spec.spec_value_id || spec.id || ''
        }))
      } else {
        this.skuForm.skus = [{ spec_name: '', spec_value_id: '' }]
      }
      this.skuFormVisible = true
    },

    deleteSKU(id) {
      this.$confirm('确定要删除该SKU吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 如果有删除API，可以在这里调用
          await delShoopSku({ id })

          // 暂时从本地列表中移除
          this.skuList = this.skuList.filter(item => item.id !== id)
          this.$message.success('删除成功')
        } catch (error) {
          console.error('删除SKU失败:', error)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    addSpec() {
      this.skuForm.skus.push({ spec_name: '', spec_value_id: '' })
    },

    removeSpec(index) {
      this.skuForm.skus.splice(index, 1)
    },

    // 当规格名称改变时，清空对应的规格值
    onSpecNameChange(index) {
      this.skuForm.skus[index].spec_value_id = ''
    },

    // 当规格值改变时的处理
    onSpecValueChange(index) {
      // 可以在这里添加额外的逻辑，比如自动生成SKU编码等
      console.log('规格值改变:', this.skuForm.skus[index])
    },

    // 根据规格名称获取对应的规格值列表
    getSpecValues(specName) {
      if (!specName) return []
      const guige = this.guigeList.find(item => item.name === specName)

      return guige ? guige.value || [] : []
    },

    async submitSKU() {
      this.$refs.skuForm.validate(async (valid) => {
        if (valid) {
          // 验证规格是否完整
          const incompleteSpecs = this.skuForm.skus.filter(spec => !spec.spec_name || !spec.spec_value_id)
          if (incompleteSpecs.length > 0) {
            this.$message.error('请完整填写所有规格信息')
            return
          }

          const skuData = {
            product_id: this.currentProduct.id,
            market_price: this.skuForm.market_price,
            vip_price: this.skuForm.vip_price,
            sales: this.skuForm.sales,
            price: this.skuForm.price,
            stock: this.skuForm.stock,
            sku_sn: this.skuForm.sku_sn,
            image: this.skuForm.image,
            skus: this.skuForm.skus.filter(spec => spec.spec_name && spec.spec_value_id).map(spec => {
              
              return {
                spec_value_id: spec.spec_value_id
                
              }
            })
          }

          if (this.skuForm.id) {
            // 编辑SKU
            try {
              await setShoopSku({
                id: this.skuForm.id,
                ...skuData
              })
              const index = this.skuList.findIndex(item => item.id === this.skuForm.id)
              if (index !== -1) {
                // 从规格值ID获取对应的规格信息用于显示
                const skuSpecs = skuData.skus.map(specValueId => {
                  // 在规格列表中查找对应的规格值
                  for (const guige of this.guigeList) {
                    const specValue = guige.value?.find(v => v.id == specValueId)
                    if (specValue) {
                      return {
                        spec_name: guige.name,
                        spec_value: specValue.value,
                        spec_value_id: specValue.id
                      }
                    }
                  }
                  return { spec_name: '', spec_value: '', spec_value_id: specValueId }
                })

                this.skuList[index] = { 
                  ...this.skuList[index], 
                  ...skuData,
                  skus: skuSpecs
                }
              }
              this.$message.success('SKU更新成功')
          this.loadSKUList( this.productId)

            } catch (error) {
              console.error('更新SKU失败:', error)
              this.$message.error('SKU更新失败')
            }
          } else {
            // 新增SKU
            try {
              const res = await setShoopSku(skuData)
              // 从规格值ID获取对应的规格信息用于显示
              const skuSpecs = skuData.skus.map(specValueId => {
                // 在规格列表中查找对应的规格值
                for (const guige of this.guigeList) {
                  const specValue = guige.value?.find(v => v.id == specValueId)
                  if (specValue) {
                    return {
                      spec_name: guige.name,
                      spec_value: specValue.value,
                      spec_value_id: specValue.id
                    }
                  }
                }
                return { spec_name: '', spec_value: '', spec_value_id: specValueId }
              })

              const newSKU = {
                ...res.data,
                id: res.data.id, // 确保新增SKU有ID
                skus: skuSpecs
              }
              // console.log(newSKU)
              // this.skuList.push(newSKU)
              this.$message.success('SKU添加成功')
          this.loadSKUList( this.productId)

            } catch (error) {
              console.error('添加SKU失败:', error)
              this.$message.error('SKU添加失败')
            }
          }
          this.skuFormVisible = false

          
        }
      })
    },

    batchUpdateSKU() {
      this.$message.success('批量更新功能开发中...')
    },

    async handleMainImageCutDown(v) { 
      const formData = new FormData();
      // 添加文件到表单数据
      formData.append('image', v.file);

      try {
        const response = await axios.post('https://api.zctj16888.com/admin/v1/image/ossUpload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        // 上传成功后更新表单中的主图地址
        console.log(response)
        this.productForm.main_image = response.data.data.url;
        this.$message.success('主图上传成功');
      } catch (error) {
        console.error('主图上传失败', error);
        this.$message.error('主图上传失败，请重试');
      }
    },

    handleImageSuccess(response, file) {
      if (response && response.data && response.data.url) {
        this.productForm.main_image = response.data.url;
        this.$message.success('图片上传成功');
      } else {
        this.$message.error('图片上传失败：无效的响应数据');
      }
    },

    async handleCarouselImageCutDown(v) { 
      const formData = new FormData();
      // 添加文件到表单数据
      formData.append('image', v.file);

      try {
        const response = await axios.post('https://api.zctj16888.com/admin/v1/image/ossUpload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        // 上传成功后添加到轮播图数组
        console.log(response)
        this.productForm.carousel_images.push(response.data.data.url);
        this.$message.success('轮播图上传成功');
      } catch (error) {
        console.error('轮播图上传失败', error);
        this.$message.error('轮播图上传失败，请重试');
      }
    },

    handleCarouselImageSuccess(response, file) {
      if (response && response.data && response.data.url) {
        this.productForm.carousel_images.push(response.data.url); // 添加到轮播图数组
        this.$message.success('图片上传成功');
      } else {
        this.$message.error('图片上传失败：无效的响应数据');
      }
    },

    removeCarouselImage(index) {
      this.$confirm('确定要删除该轮播图吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productForm.carousel_images.splice(index, 1);
        this.$message.success('轮播图删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 5 张图片，您已经选择了 ${files.length} 张图片，请删除一些图片再上传！`);
    },

    async addGuige() {
      this.guigeForm = {
        id: '',
        name: ''
      }
      this.guigeFormVisible = true
    },

    async editGuige(row) {
      this.guigeForm = { ...row }
      this.guigeFormVisible = true
    },

    async deleteGuige(id) {
      this.$confirm('确定要删除该规格吗？删除后将无法恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 找到要删除的规格
          const guige = this.guigeList.find(item => item.id === id);
          if (!guige) {
            this.$message.error('规格不存在');
            return;
          }

          await delStoreGuigeSave({
            id:guige.id
          })

          // 调用API删除规格（通过设置空值数组来删除）
         

       

          // 从本地列表中移除
          this.guigeList = this.guigeList.filter(item => item.id !== id);
          this.$message.success('删除成功');

          // 重新加载规格列表
          await this.loadGuigeList();
        } catch (error) {
          console.error('删除规格失败:', error);
          this.$message.error('删除失败');
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    async submitGuige() {
      this.$refs.guigeForm.validate(async (valid) => {
        if (valid) {
          try {
            // 准备规格数据
            const guigeData = {
              product_id: this.currentProduct.id,
              name: this.guigeForm.name
            };

            if (this.guigeForm.id) {
              // 编辑规格 - 需要包含现有的规格值
              const existingGuige = this.guigeList.find(item => item.id === this.guigeForm.id);
              if (existingGuige && existingGuige.value) {
                const values = existingGuige.value.map(v => ({
                  id: v.id,
                  value: v.value,
                  image: v.image
                }));

                const updateData = {
                  id: this.guigeForm.id,
                  product_id: this.currentProduct.id,
                  name: this.guigeForm.name,
                  values: JSON.stringify(values)
                };

                const res = await setStoreGuigeSave(updateData);
                console.log('规格更新响应:', res);

                // 更新本地数据
                const index = this.guigeList.findIndex(item => item.id === this.guigeForm.id);
                if (index !== -1) {
                  this.guigeList[index] = {
                    ...this.guigeList[index],
                    name: this.guigeForm.name
                  };
                }
                this.$message.success('规格更新成功');
              }
            } else {
              // 新增规格 - 初始化为空规格值数组
              const newGuigeData = {
                product_id: this.currentProduct.id,
                name: this.guigeForm.name,
                values: JSON.stringify([])
              };

              const res = await setStoreGuigeSave(newGuigeData);
              console.log('规格添加响应:', res);

              // 添加到本地列表
              const newGuige = {
                id: res.data.id || Date.now(),
                product_id: this.currentProduct.id,
                name: this.guigeForm.name,
                value: [],
                created_at: new Date().toLocaleString(),
                updated_at: new Date().toLocaleString()
              };
              this.guigeList.push(newGuige);
              this.$message.success('规格添加成功');
            }

            this.guigeFormVisible = false;
            // 重新加载规格列表以获取最新数据
            await this.loadGuigeList();
          } catch (error) {
            console.error('保存规格失败:', error);
            this.$message.error('保存规格失败');
          }
        }
      });
    },

    async addGuigeValue(row) {
      this.guigeValueForm = {
        id: '',
        guige_id: row.id,
        value: '',
        image: ''
      }
      this.guigeValueFormVisible = true
    },

    async editGuigeValue(guigeId, valueId) {
      const guige = this.guigeList.find(item => item.id === guigeId);
      if (guige && guige.value) {
        const value = guige.value.find(v => v.id === valueId);
        if (value) {
          this.guigeValueForm = {
            id: value.id,
            guige_id: guige.id,
            value: value.value,
            image: value.image
          };
          this.guigeValueFormVisible = true;
        }
      }
    },

    async deleteGuigeValue(guigeId, valueId) {
      this.$confirm('确定要删除该规格值吗？删除后将无法恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 找到对应的规格
          const guige = this.guigeList.find(item => item.id === guigeId);
          if (!guige || !guige.value) {
            this.$message.error('规格或规格值不存在');
            return;
          }

          // 从规格值数组中移除要删除的值
          const updatedValues = guige.value.filter(v => v.id !== valueId);

          // 调用API更新规格（移除指定的规格值）
          const updateData = {
            id: guige.id,
            product_id: this.currentProduct.id,
            name: guige.name,
            values: JSON.stringify(updatedValues)
          };

          const res = await setStoreGuigeSave(updateData);
          console.log('规格值删除响应:', res);

          // 更新本地数据
          guige.value = updatedValues;
          this.$message.success('删除成功');
        } catch (error) {
          console.error('删除规格值失败:', error);
          this.$message.error('删除失败');
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    async submitGuigeValue() {
      this.$refs.guigeValueForm.validate(async (valid) => {
        if (valid) {
          try {
            // 找到对应的规格
            const guige = this.guigeList.find(item => item.id === this.guigeValueForm.guige_id);
            if (!guige) {
              this.$message.error('规格不存在');
              return;
            }

            // 准备规格值数据
            let values = [];
            if (guige.value && Array.isArray(guige.value)) {
              values = guige.value.map(v => ({
                id: v.id,
                value: v.value,
                image: v.image
              }));
            }

            if (this.guigeValueForm.id) {
              // 编辑模式
              const valueIndex = values.findIndex(v => v.id === this.guigeValueForm.id);
              if (valueIndex !== -1) {
                values[valueIndex] = {
                  id: this.guigeValueForm.id,
                  value: this.guigeValueForm.value,
                  image: this.guigeValueForm.image
                };
              }
            } else {
              // 新增模式
              const newValue = {
                id: '',
                value: this.guigeValueForm.value,
                image: this.guigeValueForm.image
              };
              values.push(newValue);
            }

            // 调用API更新规格（包含所有规格值）
            const updateData = {
              id: guige.id,
              product_id: this.currentProduct.id,
              name: guige.name,
              values: JSON.stringify(values)
            };

            const res = await setStoreGuigeSave(updateData);
            console.log('规格值保存响应:', res);

            // 更新本地数据
            if (this.guigeValueForm.id) {
              // 编辑模式
              const valueIndex = guige.value.findIndex(v => v.id === this.guigeValueForm.id);
              if (valueIndex !== -1) {
                guige.value[valueIndex] = {
                  id: this.guigeValueForm.id,
                  value: this.guigeValueForm.value,
                  image: this.guigeValueForm.image
                };
              }
              this.$message.success('规格值更新成功');
            } else {
              // 新增模式
              const newValue = {
                id: Date.now(),
                value: this.guigeValueForm.value,
                image: this.guigeValueForm.image
              };
              if (!guige.value) guige.value = [];
              guige.value.push(newValue);
              this.$message.success('规格值添加成功');
            }

            this.guigeValueFormVisible = false;
          } catch (error) {
            console.error('保存规格值失败:', error);
            this.$message.error('保存规格值失败');
          }
        }
      });
    },

    async loadGuigeList(productId) {
      try {
        const res = await getStoreGuigeList({
          product_id: productId || this.currentProduct?.id
        });
        console.log('加载规格列表:', res.data);

        if (res.data && Array.isArray(res.data)) {
          this.guigeList = res.data;
        } else {
          this.guigeList = [];
        }
      } catch (error) {
        console.error('加载规格列表失败:', error);
        this.guigeList = [];
      }
    },

    async handleSKUImageCutDown(v) { 
      const formData = new FormData();
      // 添加文件到表单数据
      formData.append('image', v.file);

      try {
        const response = await axios.post('https://api.zctj16888.com/admin/v1/image/ossUpload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        // 上传成功后更新SKU规格图片
        console.log(response)
        this.skuForm.image = response.data.data.url;
        this.$message.success('规格图片上传成功');
      } catch (error) {
        console.error('规格图片上传失败', error);
        this.$message.error('规格图片上传失败，请重试');
      }
    },

    handleSKUImageSuccess(response, file) {
      if (response && response.data && response.data.url) {
        this.skuForm.image = response.data.url;
        this.$message.success('图片上传成功');
      } else {
        this.$message.error('图片上传失败：无效的响应数据');
      }
    },

    async handleGuigeValueImageCutDown(v) { 
      const formData = new FormData();
      // 添加文件到表单数据
      formData.append('image', v.file);

      try {
        const response = await axios.post('https://api.zctj16888.com/admin/v1/image/ossUpload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        // 上传成功后更新规格值图片
        console.log(response)
        this.guigeValueForm.image = response.data.data.url;
        this.$message.success('规格值图片上传成功');
      } catch (error) {
        console.error('规格值图片上传失败', error);
        this.$message.error('规格值图片上传失败，请重试');
      }
    },

    handleGuigeValueImageSuccess(response, file) {
      if (response && response.data && response.data.url) {
        this.guigeValueForm.image = response.data.url;
        this.$message.success('图片上传成功');
      } else {
        this.$message.error('图片上传失败：无效的响应数据');
      }
    },

    testEditor() {
      console.log('WangEditor content:', this.productForm.detail);
      this.$message.success('WangEditor content logged to console.');
    }
  }
}
</script>

<style scoped>
.product-management {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-name {
  font-weight: bold;
  color: #303133;
}

.product-detail {
  font-size: 12px;
  color: #909399;
}

.price-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.current-price {
  font-size: 16px;
  font-weight: bold;
  color: #f56c6c;
}

.vip-price {
  font-size: 12px;
  color: #e6a23c;
}

.market-price {
  font-size: 12px;
  color: #909399;
  text-decoration: line-through;
}

.sku-header {
  margin-bottom: 20px;
}

.spec-item {
  margin-bottom: 5px;
}

.spec-label {
  font-weight: bold;
  color: #606266;
  margin-right: 5px;
}

.spec-value {
  color: #303133;
}

.spec-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.carousel-images-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.carousel-image-item {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.carousel-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.carousel-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.carousel-upload-btn {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.carousel-upload-btn:hover {
  border-color: #409eff;
}

.guige-header {
  margin-bottom: 20px;
}

.guige-values {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wang-editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.wang-editor-container .w-e-toolbar {
  border-bottom: 1px solid #dcdfe6;
}

.wang-editor-container .w-e-text-container {
  min-height: 300px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  line-height: 1.4;
}
</style>
